import React, { useState,useEffect } from 'react';
import {
  MessageOutlined,
  UserOutlined,
  HeartOutlined,
  StarOutlined,
  HeartFilled,
  StarFilled,
  SearchOutlined
} from '@ant-design/icons';
import { Layout, List, Space, Menu,Modal, Button, AutoComplete, ConfigProvider, Avatar,  FloatButton} from 'antd';
import {Input} from 'antd'
import {Route } from 'react-router-dom';
import logo from '../../asses/images/1.png'
import PostDetail from './PostDetail'         
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
const { Header, Content} = Layout;

const items = [
  {
    label: '贴吧',
    key: 'SubMenu',

    children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: '考研',
            key: 'setting:1',
          },
          {
            label: '教资',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: '四六级',
            key: 'setting:3',
          },
          {
            label: '考公',
            key: 'setting:4',
          },
        ],
      },
    ],
  },

  {
    label:'电子书',
    key:'book'
  },

  
  {
    label: '题库',
    key: 'alipay',
  },
];





const HomePage = () => {


  const history = useHistory()

  // 帖子详情
  const [show, setShow] = useState(false);  
  const [messages, setMessages] = useState([]);  
  const [inputValue, setInputValue] = useState('');  
  
  const handleClose = () => {  
    setShow(false);  
    setInputValue('');  
  };  
  




  //实现卡片点击喜欢或收藏
  const [like,setlike] = useState(false)
  const handleLike=()=>{
    setlike(!like)
  }
  //实现卡片点击收藏
  const [colect,setColect] = useState(false)

  const [current,setCurrent] =useState('')
  const onhandle=(e)=>{
    setCurrent(e.key)
    if(e.key == 'book'){
      history.push('/book')
    }
    else if(e.key == 'alipay'){
      history.push('/alipay')
    }
    else{
      history.push('/home')
    }
  }

  const [searchValue, setSearchValue] = useState("");
  const [History, setHistory] = useState([]);

  const handleSearch = () => {
    // 搜索逻辑，将搜索值加入历史记录
    if (searchValue !== "") {
      setHistory([searchValue, ...History]);
      setSearchValue("");
    }
  };

  const handleClearHistory = () => {
    // 清空历史记录
    setHistory([]);
    setSearchValue(""); // 清空输入框的值
  };

  const handleSearchChange = (value) => {
    setSearchValue(value);
  };

  const selectSearchItem = (value) => {
    if (value === "clear") {
      // 点击清空历史记录按钮
      handleClearHistory();
    } else {
      setSearchValue(value);
      handleSearch();
    }
  };

  const options = History.map((item) => ({ value: item }));

  // 添加清空历史记录按钮的选项，只有当历史记录不为空时才显示
  if (History.length > 0) {
    options.push({ value: "clear", label: "清空历史记录" });
  }






 //主页面列表
  const data = Array.from({ length: 23 }).map((_, i) => ({
    title: `ant design part ${i}`,
    avatar: `https://xsgames.co/randomusers/avatar.php?g=pixel&key=${i}`,
    description:
      '河北师范大学',
    content:
      `考研大苏打啊大苏打 ${i}`,
  }));
 
  return (

    // 主题颜色
    <ConfigProvider
    theme={{
      token: {
        // Seed Token，影响范围大
        colorPrimary: '#73d13d',
        borderRadius: 20,

        // 派生变量，影响范围小
        colorBgContainer: '#f6ffed',
      },
    }}
  >

    <Layout>

      {/* Header头部 */}
      <Layout>
        <Header style={{
            padding: 0, 
            background: '#ffffff',
            margin:10,
            height:125,
            borderRadius:20,
            }}>
            
           

            <div style={{height:50, display:'flex'}}>
              <img src={logo} style={{height:80}} />
              {/* 搜索框 */}
            
              <Space direction="vertical" style={{ width: 300,margin:'auto'}}>
                <AutoComplete
                  options={options}
                  value={searchValue}
                  style={{ width: 300 }}
                  onChange={handleSearchChange}
                  onSelect={selectSearchItem}
                  placeholder={"搜索关键字"}
                  backfill={true}
                >
                  
                  <Input
                    suffix={
                      <SearchOutlined
                        onClick={handleSearch}
                        style={{ cursor: "pointer" }}
                      />
                    }
                    value={searchValue}
                    onChange={(e) => setSearchValue(e.target.value)}
                  />
                </AutoComplete>
              </Space>
            {/* 用户 */}  
              <Avatar style={{
                margin:'5px'
              }} size='large' icon={<UserOutlined />}/> 
            </div>
            
            <div>
              <div
                style={{display:'flex'}}
              >
             
              </div>
            </div>
          

              <div style={{
                display:'flex',
              }}>
                <Menu 
                style={{
                  height:60,
                  margin:'auto',
                  marginTop:15,
                  borderRadius:20,
              background:'#ffffff',

                }}
                  mode='horizontal'
                  onClick={onhandle} 
                  selectedKeys={current} 
                  items={items}
                  >
                </Menu>
                <FloatButton.BackTop />
              </div>
          
        
        </Header>

        {/* 内容部分 */}
        <Content
          style={{
            margin: '20px 16px',
            padding: 24,
            minHeight:'74vh',
            background:'#ffffff',
            borderRadius:20,
            maxHeight:'74vh',
            overflow:'auto',
          }}
        >
          {/* 首页页面 */}

              {/* <Button  
                type='primary'
                style={shadow}  
                onMouseEnter={handleMouseEnter}  
                onMouseLeave={handleMouseLeave}  
              >  
                首页
              </Button>  */}

             
             <List
              itemLayout="vertical"
              size="large"
              dataSource={data}
              renderItem={(item) => (
                <List.Item
                  key={item.title}
                  actions={[
                    <Button
                    type="text"
                    icon={like ? <HeartFilled style={{color:"#ff4d4f"}} />: <HeartOutlined /> }
                    onClick={handleLike}
                     />,
                    <Button
                    type="text"
                    icon={colect ? <StarFilled style={{color:"#ffec3d"}} />: <StarOutlined /> }
                    onClick={() => setColect(!colect)}
                     />,
                    <Button
                      type='text'
                      icon={<MessageOutlined />}
                    />
                  ]}
                  extra={
                    <img
                      width={272}
                      alt="logo"
                      src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                    />
                  }
                >
                  <List.Item.Meta
                    avatar={<Avatar src={item.avatar} />}
                    title={<a onClick={()=>setShow(true)}>{item.title}</a>}
                    description={item.description}
                  />
                  {item.content}
                </List.Item>
              )}
              />
              <Modal 
                title="Chat Box"  
                open={show}  
                onCancel={handleClose}  
                footer={null}  
              >  
              <div style={{
                width:30,
                height:"80vh"
              }} ></div>
              </Modal>
          
        </Content>
        <Route path='/postDetail'>
          <PostDetail />
        </Route>
      
      </Layout>

    </Layout>
  </ConfigProvider>

  );
};


export default HomePage